<template>
	<div>
		<svg width="336" height="150" class="text">
			<!-- 定义渐变颜色 -->
			<defs>
				<linearGradient id="geekColor" gradientTransform="rotate(90)">
					<stop offset="0%" stop-color="#ede3e7">
						<!-- 渐变动画 -->
						<animate attributeName="stop-color" values="#ee3f4d;#f1939c;#f03752" dur="10s" begin="0s" repeatCount="indefinite" />
					</stop>

					<stop offset="100%" stop-color="#0baafc">
						<animate attributeName="stop-color" values="#d0dfe6;#0bfcee;#1177b0" dur="10s" begin="0s" repeatCount="indefinite" />
					</stop>
				</linearGradient>
			</defs>

			<!-- <text class="logo_text" x="0" y="100">铁路客车智慧轮轴检修管理系统</text> -->
			<text class="logo_text" x="0" y="100">{{name}}</text>
		</svg>
	</div>
</template>

<script>
	export default {
		props: {
			name: {
				type: String,
				default: '小笑残虹'
			}
		},
		data() {
			return {};
		},
	};
</script>

<style scoped>
	.logo_text {
		font-family: "PingFang SC";
		font-size: 84px;
		fill: none;
		stroke: url("#geekColor");
		stroke-width: 1;
		stroke-dasharray: 10 800;
		stroke-dashoffset: 10;
		animation: 3s linear 0s drawing forwards;
	}

	/* 绘画动画 */
	@keyframes drawing {
		to {
			stroke-dasharray: 800;
			stroke-dashoffset: 0;
		}
	}
</style>
